<template>
    <el-table ref="returnTable" :data="returnData" border class="table" header-cell-class-name="table-header">
        <el-table-column prop="id" width="65" label="序号" align="center"></el-table-column>
         <el-table-column sortable prop="receipt_id" label="领用编号" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column sortable prop="sample_id" label="样品编号" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column sortable prop="sample_name" label="样品名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column sortable prop="lot_number" label="批号" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="receipt_amount" label="领用量" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="return_amount" label="退回量" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column sortable prop="project_id" label="项目编号" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="dflag" label="领用分装样品" align="center" show-overflow-tooltip>
            <template #default="scope">
                <el-tag v-if="scope.row.dflag===1" type="success">是</el-tag>
                <el-tag v-if="scope.row.dflag===0" type="warning">否</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="rflag" label="分装退回" align="center" show-overflow-tooltip>
            <template #default="scope">
                <el-tag v-if="scope.row.rflag===-1" type="info">待定</el-tag>
                <el-tag v-if="scope.row.rflag===true" type="success">是</el-tag>
                <el-tag v-if="scope.row.rflag===false" type="warning">否</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" show-overflow-tooltip>
            <template #default="scope">
                <el-button
                    type="primary"
                    size="small"
                    :icon="Edit"
                    @click="handleEdit(scope.$index,scope.row)"
                    v-permiss="15"
                >
                    编辑
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog 
        draggable 
        title="样品退回" 
        v-model="editVisible" 
        destroy-on-close
        :close-on-click-modal="false"
    >
        <SampleReturnEdit :form="rowData" :edit="idEdit" :update="update"></SampleReturnEdit>
    </el-dialog>
    <div class="dialog-footer">
        <el-button type="success" :icon="Upload" @click="submitForm()">
            提交退回单
        </el-button>
    </div>
</template>

<script setup lang="ts">
import { reactive,ref } from "vue"
import { Edit,Upload } from '@element-plus/icons-vue'
import { ElMessageBox,ElMessage } from "element-plus"
import SampleReturnEdit from "./sample_return_edit.vue"
import useReceipt from "../../hooks/Receipt/useReceipt"

const props = defineProps({
    tableData:{
        type:Object,
        required:true
    },
    closeDialog: {
        type:Function,
        required:true
    }
})
// 获取表格数据                                                                                                                                                                           
interface TableItem { 
    id: number;
    sample_id: string;
    sample_name: string;
    return_amount: number;
    lot_number: string;
    project_id: string;
    transport: string;
    status: number;
    dflag: false;
    rflag: false;
}

const returnData = ref([] as any)
returnData.value = props.tableData
// 编辑表格
const editVisible = ref(false);
let idx: number = -1;
const idEdit = ref(false);
const rowData = ref({});
const handleEdit = (index: number, row: TableItem) => {
    idx = index;
    editVisible.value = true;
    rowData.value = row;
    idEdit.value = true;
}

const update = (row:TableItem) => {
    returnData.value[idx] = row
    editVisible.value = false
}

const { postReturn } = useReceipt()
const submitForm = () => {
    ElMessageBox.confirm('确定要退回样品吗？', '提示',{
        type: "warning",
        draggable: true,
    }).then( () => {
        postReturn(returnData.value).then( res => {
            if(res.data === 202){
                returnData.value = []
                ElMessage.success("提交成功！！")
                props.closeDialog()
            }else if(res.data === 404){
                ElMessage.error("提交错误，表格不能有空值！！")
            }
        })
    }).catch(()=>{
    })
}

</script>

<style scoped>
.dialog-footer {
	margin-bottom: 10px;
	margin-top:10px;
    text-align:left;
}
</style>
